<!--
    作者：1055471363@qq.com
    时间：2017-12-12
    描述：批次结束操作
-->
<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>批次结束操作</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/jquery.mobile-1.4.5.css" />
		<!--<link rel="stylesheet" href="../../css/app.css" />-->
		<script type="text/javascript" src="../../js/jquery.min.js"></script>
		<script type="text/javascript" src="../../js/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="../../base.js"></script>
		<style>
			.mui-bar {
				background-color: #0088BB;
			}
			
			.mui-title {
				color: #FFFFFF
			}
			
			a {
				color: #FFFFFF
			}
			.ui-table-columntoggle-btn {
				display: none !important;
			}
			
			tr {
				border-bottom: 1px solid #d6d6d6;
			}
			/*th {
				line-height: 1.5em;
				text-align: left;
				padding: .4em .5em;
				vertical-align: bottom;
			}*/
			
			td {
				border-bottom: 1px solid #d6d6d6;
				width: 50%;
			}
			
			tr:nth-child(even) {
				background: #e9e9e9;
			}
			
			html,
			body,
			.mui-content {
				height: 0px;
				margin: 0px;
				background-color: #efeff4;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id='user'>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">批次结束作业{{name}}</h1>
		</header>

		<div class="mui-content" id="lotsEndTable">
			<div data-role="main" class="ui-content">

				<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow">
					<thead>
						<tr>
							<th>项目</th>
							<th>数据</th>
						</tr>
						<tr>
							<th>LOT ID</th>
							<td>{{items.LotId}}</td>
						</tr>
						<tr>
							<th>EQP ID</th>
							<td>{{eqpID}}</td>
						</tr>
						<tr>
							<th>开始时间</th>
							<td>{{items.ProcessStartTime}}</td>
						</tr>
						<tr>
							<th>结束时间</th>
							<td>{{items.ProcessEndTime}}</td>
						</tr>
						<tr>
							<th>投料数量</th>
							<td>{{items.TotalQty}}</td>
						</tr>
						<tr>
							<th>计数产量(K)</th>
							<th>实际产量(K)</th>

						</tr>
						<tr>
							<td>{{items.TotalQty/1000}}</td>
							<td>
								<input type="number" style="width: 100%;height: 100%;" v-model="DoneQty" value="{{items.DoneQty/1000}}" />
							</td>
						</tr>
						<tr>
							<th>合格率</th>
							<td>{{items.YieID}}%</td>
						</tr>
						<tr>
							<th>UPH</th>
							<td>{{items.UPH}}</td>
						</tr>
						<!--<tr>
							<th>料盒信息</th>
							<th>提篮信息</th>
						</tr>
						<tr>
							<td>
								<input class="mui-input-numbox" type="number" style="width: 80px;height: 30px;" v-model="DoneQty" value="{{items.DoneQty}}" />
							</td>
							<td>
								<input class="mui-input-numbox" type="number" style="width: 80px;height: 30px;" v-model="DoneQty" value="{{items.DoneQty}}" />
							</td>
						</tr>-->
						<tr>
							<th>关键报警情况</th>
							<th></th>
						</tr>

					</thead>
					<tbody v-for="(alarm,index) in alarms">
						<tr>
							<td>{{alarm}}</td>
							<!--<th v-else="">{{alarm}}</th>-->
						</tr>
						<!--<tr>
                            <td>{{alarms}}</td>
                        </tr>-->
					</tbody>
				</table>
				<!--<div class="mui-input-row" id="app">-->
				<!--<form action="" method="post">-->
				<table>
					<tr>
						<th>备注：</hd>
							<td>
								<input type="text" class="mui-input-clear" placeholder="" v-model="Remark" style="width: 250px;height: 20px;">
							</td>
					</tr>

				</table>
				<!--</form>-->

				<!--</div>-->
				<!--根据批次的状态判断是否显示批次结束按钮-->
				<button type="button" v-show="items.IsProcessStart==true" class="mui-btn mui-btn-primary mui-btn-block" @click="processEnd">结束作业</button>
			</div>
		</div>
	</body>

</html>
<script src="../../js/mui.min.js"></script>
<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script type="text/javascript" src="../../js/immersed.js"></script>
<script type="text/javascript">
	mui.init({
		swipeBack: true //启用右滑关闭功能
	})

	mui.plusReady(function() {
		var mask = mui.createMask(); //遮罩层
		var localEqp = localStorage.getItem("localEqp");
		var user = localStorage.getItem("user")

		var app = new Vue({
			el: '#user',
			data: {
				name: "(" + user + "设备：" + localEqp + ")"
			}
		})

		var vm = new Vue({
			el: '#lotsEndTable',
			data: {
				//                  banner: {}, //顶部工号数据
				items: {}, //table信息流数据
				eqpID: localEqp,
				DoneQty: '',
				Remark: '',
				LotId: '',
				alarms: {}
			},
			mounted: function() {
				this.showLotInfo();
			},
			methods: {
				processEnd: function() {
					var _this = this;
					//                      var EQPID = localStorage.localEqp;
					var LotId = _this.LotId
					var DoneQty = _this.DoneQty
					var Remark = _this.Remark
					var btnArray = ['取消', '确定'];
					mui.confirm('确定结束作业？', '提示', btnArray, function(e) {
						if(e.index == 1) {
							mui.ajax(base + '/endProcess/index?EqpId=' + localEqp + '&DoneQty=' + DoneQty + "&LotId=" + LotId + "&Remark=" + Remark, {
								data: {
									//                              EQPID: localEqp
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 30000, //超时时间设置为10秒；
								async: true,
								success: function(data) {
									//震动
									navigator.vibrate = navigator.vibrate ||
										navigator.webkitVibrate ||
										navigator.mozVibrate ||
										navigator.msVibrate;
									if(data.COMPARERESULT == true) {
										_this.items.ProcessEndTime = new Date();
										//					_this.showLotInfo();
										navigator.vibrate([400, 300, 200, 100]);
										mui.alert(data.MESSAGE)

										//返回父页面
										mui.back();
										var list = plus.webview.currentWebview().opener();
										//触发父页面的自定义事件(refresh),从而进行刷新
										mui.fire(list, 'refresh');
										//返回true,继续页面关闭逻辑
										return true;
									} else {
										mui.toast("批次结束作业失败！");
									}
								},
								error: function(xhr, type, errorThrown) {
									mui.toast("网络异常，批次结束作业请求失败");
								}
							});
						} else {
							mui.toast("请仔细检查")
						}
					})
				},
				showLotInfo: function() {
					var _this = this;
					var EQPID = localStorage.localEqp;
					mui.ajax(base + '/ShowEndProcess/index.json', {
						//                                  mui.ajax('../../json/lotEnd.json', {
						data: {
							EQPID: localEqp,
							USERNAME: user
						},
						dataType: 'json', //服务器返回json格式数据
						type: 'post', //HTTP请求类型
						timeout: 30000, //超时时间设置为30秒；
						async: true,
						//                      beforeSend: function() {
						//                          plus.nativeUI.showWaiting("数据请求中...");
						//                          mask.show(); //显示遮罩层
						//                      },
						//                      complete: function() {
						//                          plus.nativeUI.closeWaiting();
						//                          mask.close(); //关闭遮罩层
						//                      },
						success: function(data) {

							_this.items = data
							_this.LotId = data.LotId
							_this.DoneQty = data.DoneQty

							if(data.MainAlarms === undefined) {} else {
								var mainAlarms = data.MainAlarms.split(/[;]/)
								_this.alarms = mainAlarms
							}
						},
						error: function(xhr, type, errorThrown) {
							mui.toast("网络异常，预作业结束失败");
						}
					});
				}
			}
		});
	});
</script>